<template>
	<view class="upload">
		<up-upload :fileList="fileList1" @after-read="afterRead" @delete="deletePic" :max-count="1"
			style="cursor: pointer">
			<image v-if="user?.avatarUrl" style="border-radius: 50%; width: 5rem; height: 5rem; object-fit: cover"
				:src="user?.avatarUrl" />
			<image v-else style="border-radius: 50%; width: 5rem; height: 5rem; object-fit: cover"
				:src="defaultAvatar" />
		</up-upload>
	</view>
	<up-cell-group>
		<up-cell title="个人设置" :value="user?.username"></up-cell>
		<up-cell :isLink="true" title="修改个人信息" url="/pages/profile/update"></up-cell>
		<up-cell :isLink="true" title="修改个人标签" url="/pages/profile/tags"></up-cell>
		<up-cell :isLink="true" title="创建的队伍" url="/pages/profile/create"></up-cell>
		<up-cell :isLink="true" title="加入的队伍" url="/pages/profile/join"></up-cell>
	</up-cell-group>
	<view class="button">
		<up-button text="注销" type="error" @click="logout" size="small"></up-button>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import myAxios from '@/plugins/myAxios'

	// 定义响应式变量
	const user = ref(null)
	const defaultAvatar = '/static/default-avatar.jpg' // 默认头像路径
	const fileList1 = ref([])

	onShow(async () => {
		try {
			const res = await myAxios.get('/user/current')
			if (res?.code === 0) {
				user.value = res.data // 设置用户信息
			} else {
				uni.showToast({
					title: '加载用户信息失败',
					icon: 'error'
				})
			}
		} catch (error) {
			uni.showToast({
				title: '加载用户信息失败',
				icon: 'error'
			})
		}
	})

	// 文件大小超出限制的处理
	const onOversize = () => {
		uni.showToast({
			title: '头像上传大小不能超过500kb',
			icon: 'error'
		})
	}

	// 处理头像文件上传逻辑
	const afterRead = async event => {
		// 可选：调试提示
		// alert(1)

		// 更新文件列表，显示上传中状态
		fileList1.value = [{
			...event.file,
			status: 'uploading',
			message: '上传中'
		}]

		try {
			const formData = new FormData()
			// 使用 append 方法添加文件到 formData 中，字段名称与后端要求一致
			formData.append('avatarImg', event.file.file)
			// console.log('上传的文件：', event.file.file)

			// 调用后端上传头像接口
			const res = await myAxios.post('/user/upload/avatar', formData, {
				headers: {
					'Content-Type': 'multipart/form-data'
				}
			})
			if (res?.code === 0) {
				// 更新用户头像地址
				user.value.avatarUrl = res.data
				fileList1.value[0].status = 'success'
				fileList1.value[0].message = ''
				fileList1.value[0].url = res.data

				uni.showToast({
					title: '更新头像成功',
					icon: 'success'
				})
			} else {
				fileList1.value[0].status = 'error'
				uni.showToast({
					title: `更新头像失败${res.description ? `, ${res.description}` : ''}`,
					icon: 'error'
				})
			}
		} catch (error) {
			fileList1.value[0].status = 'error'
			uni.showToast({
				title: '更新头像失败，请重试',
				icon: 'error'
			})
		}
	}

	// 删除头像操作
	const deletePic = () => {
		fileList1.value = [] // 清空文件列表
	}

	// 用户注销逻辑
	const logout = async () => {
		try {
			const res = await myAxios.post('/user/logout')
			if (res?.code === 0) {
				user.value = null // 清空用户信息
				uni.removeStorageSync('cookie')
				uni.showToast({
					title: '已注销',
					icon: 'success'
				})
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/index/index' // 路径改为uni-app的页面路径
					})
				}, 1000)
			} else {
				uni.showToast({
					title: '注销失败，请重试',
					icon: 'error'
				})
			}
		} catch (error) {
			uni.showToast({
				title: '注销失败，请重试',
				icon: 'error'
			})
		}
	}
</script>

<style scoped>
	.upload {
		margin: 15px auto;
		text-align: center;
		display: block;
		width: 5rem;
		/* 根据需要调整宽度 */
	}

	.button {
		width: 100rpx;
		margin: 15rpx auto;
	}
</style>